<template>
    <div class="mappedHouseList">
        <el-form :inline="true" size="small" class="demo-form-inline">
            <el-form-item label="好生活楼盘名称：">{{allData.devName}}</el-form-item>
            <el-form-item label="id：">{{allData.devId}}</el-form-item>
        </el-form>
        <el-form :inline="true" size="small" class="demo-form-inline">
            <el-form-item label="明源crm项目名称：">{{allData.crmProjectName}}</el-form-item>
            <el-form-item label="id：">{{allData.crmProjectCode}}</el-form-item>
        </el-form>
        <el-table :data="allData.rows.list" border style="width: 100%">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column label="好生活" align="center">
                <el-table-column label="楼栋" prop="buildingId" align="center">
                </el-table-column>
                <el-table-column label="单元" prop="unitId" align="center">
                </el-table-column>
                <el-table-column label="楼层" prop="floorId" align="center">
                </el-table-column>
                <el-table-column label="房间号" prop="houseNum" align="center">
                </el-table-column>
            </el-table-column>
            <el-table-column label="明源CRM" align="center">
                <el-table-column label="楼栋" prop="crmBuildingName" align="center">
                </el-table-column>
                <el-table-column label="单元" prop="crmUnitName" align="center">
                </el-table-column>
                <el-table-column label="楼层" prop="crmFloorName" align="center">
                </el-table-column>
                <el-table-column label="房间号" prop="crmRoomCode" align="center">
                </el-table-column>
            </el-table-column>
            <el-table-column prop="closingStatus" label="成交状态" align="center"></el-table-column>
            <el-table-column prop="updatePeople" label="操作人" align="center"></el-table-column>
            <el-table-column prop="updateTime" label="操作时间" align="center"></el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'mappedHouseList',
        data() {
            return {
                pageSize: 10,
                pageNum: 1,
                totalSize: 0,
                code: '',
                allData: {
                    crmProjectCode: "",
                    crmProjectName: "",
                    devId: 0,
                    devName: "",
                    rows: {
                        list: []
                    }
                },

            }
        },
        created() {
            this.code = this.$route.query.code
            this.getMappedHouseList()
        },
        mounted() {

        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.pageNum = 1;
                this.getMappedHouseList();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getMappedHouseList();
            },
            getMappedHouseList() {
                this.$axios.post("/forcrm/projectMapping/getMappedHouseList", {
                    crmDevCode: this.code,
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                }).then(res => {
                    this.allData = res;
                    this.totalSize = res.rows.total
                })
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">

</style>
